<template>
  <div class="btn-group" data-toggle="buttons">
    <label class="btn" @click="labelClick(item.value)" v-bind:class="[item.color, item.active?'active':'']" v-bind:key="index" v-for="(item,index) in items">
      <input v-bind:name="item.name" type="radio" autocomplete="off" v-bind:value="item.value"> {{item.option}}
      <span v-bind:class="['glyphicon', item.active?'glyphicon-check':'glyphicon-unchecked']" aria-hidden="true"></span>
    </label>
  </div>
</template>

<script>
export default {
  name: 'radio',
  data: function () {
    return {
      picked: ''
    }
  },
  // data: function () {
  //   return {
  //     items: [
  //       {
  //         name: 'label',
  //         value: 1,
  //         option: '服务赞',
  //         color: 'btn-success',
  //         active: true
  //       },
  //       {
  //         name: 'label',
  //         value: 2,
  //         option: '服务差',
  //         color: 'btn-warning',
  //         active: false
  //       },
  //       {
  //         name: 'label',
  //         value: 3,
  //         option: '黑中介',
  //         color: 'btn-danger',
  //         active: false
  //       }
  //     ]
  //   }
  // },
  props: {
    items: Array
  },
  methods: {
    labelClick (v) {
      this.items.forEach(function (n, i) {
        n.active = n.value === v
      })
      this.$emit('radioChange', v)
    }
  }
}
</script>

<style scoped lang="less">
</style>
